import React from 'react'
import clsx from 'clsx'
import styles from './styles.module.css'
import Link from '@docusaurus/Link'
import Translate from '@docusaurus/Translate'
import 'animate.css/animate.min.css'

const items = [
  {
    id: 1,
    title: (
      <Translate
        id="component.home.FeatureRight.features.1"
        description="First feature of AIoT edition">
        PolyOS AIoT embodies a trait of heightened customizability,
        coupled with its exceptional compatibility with RISC-V
        hardware.
      </Translate>
    ),
  },
  {
    id: 2,
    title: (
      <Translate
        id="component.home.FeatureRight.features.2"
        description="The second feature of AIoT Edition">
        PolyOS AIoT boasts support for a diverse array of RISC-V
        hardware, embedded intelligent inference frameworks, as well
        as the construction and deployment of multi-core image
        configurations.
      </Translate>
    ),
  },
  {
    id: 3,
    title: (
      <Translate
        id="component.home.FeatureRight.features.3"
        description="The third feature of AIoT edition">
        PolyOS AIoT attains performance that stands at the forefront
        of its counterparts.
      </Translate>
    ),
  },
]
export default function FeatureRight(): React.JSX.Element {
  return (
    <div className={clsx(styles.heroBanner)}>
      <div className={clsx('card', styles.feature)}>
        <div className="container">
          <h1 className={styles.title}>
            {' '}
            <Translate
              id="component.home.FeatureRight.title"
              description="about PolyOS AIoT">
              PolyOS AIoT
            </Translate>
          </h1>
          <p className={styles.subtitle}>
            <ul>
              {items.map((item) => (
                <li key={item.id}>{item.title}</li>
              ))}
            </ul>
          </p>
          <div>
            <Link
              className="button button--primary button--outline button--lg"
              to="https://isrc.iscas.ac.cn/riscv-raios/docs/">
              <Translate
                id="component.home.FeatureRight.button.learnMore.text"
                description="homepage PolyOS AIoT get-started button">
                Learn more
              </Translate>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}
